<template>
	<view>
		<view class="padding text-sm text-white flex justify-between align-center" style="background-color: #1994ad;">
			<text>{{$orderStatus(order.status)}}</text>
			<text v-if="$orderStatus(order.status)=='待支付' && time!=null">
				<text v-if="time.hour>0">{{time.hour}}小时</text>
				<text v-if="time.minute>0">{{time.minute}}分钟</text>
				<text v-if="time.second>0">{{time.second}}秒</text>
				<text v-if="time.second>0">后关闭</text>
			</text>
		</view>
		<view class="flex justify-between align-center padding bg-white">
			<view style="width: 100%;">
				<view class="padding-right">
					{{order.express.username}}
					<text class="text-gray padding-left text-sm">{{order.express.phone}}</text>
				</view>
				<view class="margin-top-xs text-gray">{{order.express.detail}}</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm">
			<view class="padding solid-bottom">已购买</view>
			<view class="padding solid-bottom flex align-center" style="width: 100%;" v-for="(item,index) in order.details" :key="item.skuId">
				<view>
					<image style="width: 50px !important;height: 50px;object-fit: cover;" mode="aspectFill" :src="item.img"></image>
				</view>
				<view class="padding-left">
					<view style="overflow: hidden;text-overflow: ellipsis;display: block;">{{item.name}}</view>
					<view class="text-sm text-gray padding-top-xs padding-bottom-xs">已选：{{item.attrName}}</view>
					<view class="flex justify-between text-gray text-sm">
						<text>数量 ：{{item.num}}</text>
						<text style="color: #C5A16F;">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="text-sm margin-top-sm bg-white">
			<view class="solid-bottom flex justify-between padding">
				<text>商品金额</text>
				<text class="text-red">￥{{order.priceTotal}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>优惠金额</text>
				<text class="text-red">-￥{{order.priceTotal - order.priceReal}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>运费</text>
				<text class="text-red">免运费</text>
			</view>
			<view class="solid-bottom padding flex">
				<text>备注</text>
				<text class="margin-left">{{order.remark}}</text>
			</view>
		</view>

		<view class="text-sm margin-top-sm bg-white">
			<view class="solid-bottom flex justify-between padding">
				<text>订单号</text>
				<text class="text-grey">{{order.orderno}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>下单时间</text>
				<text class="text-grey">{{order.createTime}}</text>
			</view>
		</view>

		<view class="text-sm margin-top-sm bg-white">
			<view class="solid-bottom flex justify-between padding">
				<text>物流公司</text>
				<text class="text-grey">{{order.express.companyNo}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>物流单号</text>
				<text class="text-grey">{{order.express.expressNo}}</text>
			</view>
		</view>

		<!--底部点位-->
		<view style="height: 50px;"></view>
		<view class="flex justify-between align-center bg-white solid-top" style="height: 40px;position: fixed;left: 0;bottom: 0;width: 100%;">
			<view class="padding-lr">
				<view class="text-bold">合计：￥{{order.priceReal}}</view>
				<view class="text-sm text-gray">共{{order.pcount}}件商品</view>
			</view>
			<view class="flex">
				<view @tap="clickCancle" style="background-color: grey;line-height: 40px;color: #FFFFFF;padding: 0 20px;" v-if="$orderStatus(order.status)=='待支付'">取消订单</view>
				<view @tap="clickPay" style="background-color: #C5A16F;line-height: 40px;color: #FFFFFF;padding: 0 20px;" v-if="$orderStatus(order.status)=='待支付'">立即付款</view>
				<view @tap="clickComment" style="background-color: #C5A16F;line-height: 40px;color: #FFFFFF;padding: 0 20px;" v-if="$orderStatus(order.status)=='待评价'">去评价</view>
				<view @tap="clickReveive" style="background-color: #C5A16F;line-height: 40px;color: #FFFFFF;padding: 0 20px;" v-if="$orderStatus(order.status)=='已发货'">确认收货</view>
			</view>
		</view>
	</view>
</template>

<script>
	var intv = null;
	var cursurplus = null;
	export default {
		data() {
			return {
				order: {},
				orderno: '',
				time: null
			}
		},
		onLoad(options) {
			this.orderno = options.orderno;
		},
		onShow() {
			this.initData();
		},
		onUnload() {
			if (intv != null) {
				clearInterval(intv)
			}
			cursurplus = null;
		},
		methods: {
			startInterval() {
				if (this.order.status == 10) { //订单创建状态
					var that = this;
					if (that.order.exts && that.order.exts.orderTime && that.order.exts.orderTime.orderAutoCancleHour) {
						var overhour = that.order.exts.orderTime.orderAutoCancleHour; //超时取消
						if (new Date().getTime() - new Date(that.order.createTime).getTime() > overhour * 60 * 60 * 1000) {
							//已超过了超时时间了
							return;
						}
						var createTime = that.$convertTime(that.order.createTime);
						intv = setInterval(function() {
							if(createTime==null) {
								createTime = that.$convertTime(that.order.createTime);
							}
							var curTime = cursurplus != null ? cursurplus : new Date().getTime();
							cursurplus = curTime + 1000;
							//计算剩余时间
							var surplus = (createTime + overhour * 60 * 60 * 1000) - cursurplus;
							var hour = surplus / 1000 / 60 / 60; //剩余小时
							// console.log('hour:'+hour);
							var inthour = parseInt(hour);
							var minute = inthour > 0 ? (hour % inthour * 60) : (hour * 60); //分钟
							// console.log('minute:'+minute);
							var intminute = parseInt(minute);
							var second = intminute>0?(minute % intminute * 60):(minute*60); //秒
							// console.log('second:'+second);
							var intsecond = parseInt(second);
							// console.log('inthour:' + inthour + '    intminute:' + intminute + '   intsecond:' + intsecond);

							that.time = {
								hour: inthour,
								minute: intminute,
								second: intsecond
							}
							if (isNaN(inthour) && isNaN(intminute) && isNaN(intsecond)) {
								clearInterval(intv)
							}
							if (inthour == 0 && intminute == 0 && intsecond == 0) {
								that.initData(); //重新请求
							}
						}, 1000);
					}
				}
			},
			initData() {
				var that = this;
				this.$get('mall/order/detail', {
					orderno: this.orderno
				}).then((res) => {
					if (res.data) {
						this.order = res.data;

						that.startInterval(); //启动计时器
					}
				})
			},
			clickComment() {
				this.$jump('/pages/order/commentskus?orderno=' + this.order.orderno)
			},
			clickCancle() {
				var that = this;
				uni.showModal({
					content: '确认取消订单？',
					success(res) {
						if (res.confirm) {
							that.$get('mall/order/cancle', {
								orderno: that.order.orderno
							}, 'post', true).then((apires) => {
								if (apires.data) {
									that.initData();
									uni.setStorage({
										key: 'order_' + that.order.orderno,
										data: 'cancled'
									})
								}
							})
						}
					}
				})
			},
			clickReveive() {
				var that = this;
				uni.showModal({
					content: '确认已收货？',
					success(res) {
						if (res.confirm) {
							that.$get('mall/order/receive', {
								orderno: that.order.orderno
							}, 'post', true).then((apires) => {
								if (apires.data) {
									that.initData();
									uni.setStorage({
										key: 'order_' + that.order.orderno,
										data: 'received'
									})
								}
							})
						}
					}
				})
			},
			clickPay() {
				uni.navigateTo({
					url: '/pages/order/casher?orderno=' + this.order.orderno + '&price=' + this.order.priceReal + '&num=' + this.order
						.pcount
				})
			}
		}
	}
</script>

<style></style>
